<template>
  <div id="map"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { gaode, image } from "@/api/ol-api/layers";
import { app } from "@/main";

onMounted(() => {
  const map = new ol.Map({
    target: "map",
    layers: [image, gaode],
    view: new ol.View({
      center: [114.37, 30.5],
      zoom: 14,
      projection: "EPSG:4326",
    }),
  });
  const docLayer = new Zondy.Map.Doc("", "guanggu", {
    crossOrigin: "Anonymous", //设置数据源跨域
  });
  // 将地图挂载到全局属性
  app.config.globalProperties.$map = map;
  app.config.globalProperties.$docLayer = docLayer;
});
</script>

<style>
#map {
  height: 100vh; /* 设置地图容器的高度 */
  width: 100vw;
}
.ol-zoom {
  top: 4em;
  right: 0.5em;
  left: auto;
}
.ol-zoom-extent {
  top: 8em;
  left: auto;
  right: 0.5em;
}
.custom-mouse-position {
  position: fixed;
  bottom: 20px;
  z-index: 100;
  left: 50%;
  transform: translate(-50%);
  width: 200px;
  height: 40px;
  background-color: rgba(101, 46, 128, 0.5);
  text-align: center;
  line-height: 40px;
  color: #fff;
  border-radius: 5px;
}
</style>
